/**
 * Created by Freeman on 2017/12/27.
 */
import React from 'react'
import {Image, StatusBar, StyleSheet, Text, View} from 'react-native'
import {connect} from 'react-redux'
import {COLOR} from '../config'
import Layout from './base/Layout'
import Block from './base/Block'
import BlockMenu from './base/BlockMenu'
import {path} from "ramda";

class Me extends React.Component {

  static navigationOptions = ({navigation}: any) => ({
    title: '我',
    headerStyle: {backgroundColor: 'white',paddingTop: StatusBar.currentHeight},
  })

  constructor (props) {
    super(props)
    this._onAvatarPress = this._onAvatarPress.bind(this)
  }

  _onAvatarPress () {
    const {auth, navigation} = this.props
    if (auth.isLogged) {
      navigation.navigate('UserProfile')
    } else {
      navigation.navigate('Login')
    }
  }

  render () {
    const {auth, navigation} = this.props
    return (
      <Layout>
        <Block
          onPress={this._onAvatarPress}
          style={styles.user}>
          <View style={styles.avatarContainer}>
            <Image
              source={require('../res/img/zqc-icon-middle.png')}
              style={styles.userAvatar}
            />
          </View>
          <View>
            <Text>
              {
                auth.isLogged ? path(['userInfo', 'nickname'], auth) : '未登录'
              }
            </Text>
          </View>
        </Block>

        <View style={{
          flex: 1,
          marginTop: 10,
          paddingVertical: 0,
        }}
        >
          <BlockMenu
            onPress={() => navigation.navigate('Settings')}
            leftIcon={'ios-settings'}
            rightIcon={'ios-arrow-forward'}
            text={'设置'}
          />
        </View>
      </Layout>
    )
  }
}

const styles = StyleSheet.create({
  user: {
    marginTop: 16,
    height: 86,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#ffffff'
  },
  avatarContainer: {
    marginLeft: 16,
    marginRight: 16,
  },
  userAvatar: {
    width: 60,
    height: 60,
    borderRadius: 10
  },
  container: {
    height: 45,
    marginTop: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderColor: COLOR.linePrompt,
    borderTopWidth: 1,
    backgroundColor: '#FFFFFF'
  },
  leftContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 16,
    marginRight: 16
  },
  leftIcon: {
    marginRight: 5,
    color: COLOR.textNormal
  },
  leftText: {
    fontSize: 14,
    color: COLOR.textEmpha
  },
  rightIconContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 16
  },
  rightIcon: {
    marginLeft: 5,
    fontSize: 16,
    color: COLOR.textNormal
  }
})

export default connect(state => ({auth: state.auth}))(Me)
